回頭看下 Form 元件類內有個 Slider 的滾軸設定，根據拖曳滾軸的方式可方便變更輸入值。

基本使用如下，並搭配 InputText 輸入框雙向檢視輸入值。

import { ref } from 'vue'
const value = ref(null)

<InputText v-model.number="value" class="mb-6" />
<Slider v-model="value" class="w-56" />

step

加上 step 設定，表示每次拖曳時一次為 step 設定之值，便不會像一般使用上可以流線型的拖曳。
以下範例為每次拖動 25。

<InputText v-model.number="value" class="mb-6" />
<Slider v-model="value" :step="25" class="w-56" />

Filter

寫這篇的原因主要是看到這個範例，透過 Slider 拖曳的效果可以改變圖片的對比度(Contrast)、亮度(Brightness)及添加棕褐色系(Sepia)。
其中，對比度、亮度及添加棕褐色系的切換使用 SelectButton 元件，SelectButton 元件的使用說明可參考 SelectButton 一篇。

const imageRef = ref(null)
const imageSrc = ref(null)
const canvasImage = ref(null)

const filter = ref(0)
const filterValues = ref([100, 100, 0])
const filterOptions = ref([
  { label: '對比度', value: 0 },
  { label: '亮度', value: 1 },
  { label: '棕褐色系', value: 2 }
])
// 加上 css 樣式
const filterStyle = computed(() => {
  return {
    filter: `contrast(${filterValues.value[0]}%) brightness(${filterValues.value[1]}%) sepia(${filterValues.value[2]}%)`
  }
})

<div class="flex flex-col items-center">
    <img
      alt="user header"
      class="w-full md:w-80 rounded mb-6"
      src="https://images.unsplash.com/photo-1723984834599-5357b87f727c?q=80&w=1858&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      :style="filterStyle"
    />
    <SelectButton
      v-model="filter"
      :options="filterOptions"
      optionLabel="label"
      optionValue="value"
      class="mb-4"
    />
    <!-- 調整 Contrast、Brightness 及 Sepia -->
    <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
</div>

另外再寫一個簡單範例，結合資料上傳 FileUpload，上傳圖片後，搭配對比度(Contrast)、亮度(Brightness)及添加棕褐色系(Sepia)的調整，再下載修改完後的圖片。

// 上傳圖片
const onCustomUpload = ($event) => {
  const file = $event.files[0]
  imageSrc.value = window.URL.createObjectURL(file)
}

// 下載圖片
const downloadImg = async () => {
  const imgWidth = imageRef.value.clientWidth;
  const imgHeight = imageRef.value.clientHeight;

  // 動態設置 canvas 的寬高
  canvasImage.value.width = imgWidth;
  canvasImage.value.height = imgHeight;

  const ctx = canvasImage.value.getContext('2d')
  ctx.filter = filterStyle.value.filter
  ctx.drawImage(imageRef.value, 0, 0, imageRef.value.clientWidth, imageRef.value.clientHeight)
  const dt = canvasImage.value.toDataURL('image/jpeg')

  const link = document.createElement('a')
  link.href = dt
  link.download = 'downloadImg.jpg';
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

<div class="flex flex-col items-center">
    <div class="mb-3">
      <div class="flex mb-3">
        <FileUpload
          name="demo[]"
          mode="basic"
          accept="image/*"
          @uploader="onCustomUpload($event)"
          :customUpload="true"
          :maxFileSize="1000000"
          :auto="true"
        />
        <Button label="下載圖片" severity="info" @click="downloadImg" class="ms-5" />
      </div>
      <img v-if="imageSrc" ref="imageRef" :src="imageSrc" alt="image" :style="filterStyle" />
      <canvas ref="canvasImage" class="hidden"></canvas>
    </div>
    <SelectButton
      v-model="filter"
      :options="filterOptions"
      optionLabel="label"
      optionValue="value"
      class="mb-4"
    />
    <Slider v-model="filterValues[filter]" class="w-56" :min="0" :max="200" />
</div>

上傳圖片調整對比度(Contrast)、亮度(Brightness)及添加棕褐色系(Sepia)

下載後：

參考連結：https://primevue.org/slider/